<template>
	<el-dialog
		:title="title"
		class="dialog-share"
		:visible.sync="dialog"
		width="800px"
		:before-close="cancel"
		:close-on-click-modal="false"
		:append-to-body="true"
	>
	<div class="dialog-content share-c">
		<el-form :model="btnForm" :rules="btnRules" ref="dialogForm" label-width="100px">
			<el-tabs v-model="btnTabsName" @tab-click="handleClick">
				<el-tab-pane label="按钮数据" name="btnData">
					<el-row>
						<el-col :span="24">
							<el-form-item label="按钮类型：" prop="sysBtnType">
								<el-select v-model="btnForm.sysBtnType" clearable placeholder="请选择按钮类型" size="small" style="display: block" @change="pageFormChange">
									<el-option v-for="(item, index) in configs.sysBtnTypes" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row>
						<el-col :span="12">
							<el-form-item label="按钮名称：" prop="btnLabel">
								<el-input v-model="btnForm.btnLabel" type="text" placeholder="请输入按钮名称" :disabled="hasPageForm == 'expandAll' ? true : false" size="small"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<!-- v-if="pageTypeArry.includes(pageType)" -->
							<el-form-item label="按钮标识：" prop="btnCode">
								<el-input v-model="btnForm.btnCode" type="text" placeholder="请输入按钮标识" size="small"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row v-if="isPageShow">
						<el-col :span="24">
							<el-form-item label="展示方式：" prop="sysPageShow">
								<el-radio-group v-model="btnForm.sysPageShow" v-for="(item, index) in configs.sysPageShows" :key="index">
									<el-radio :label="item.dictValue">{{ item.dictLabel }}</el-radio>
								</el-radio-group>
							</el-form-item>
						</el-col>
					</el-row>
					
					<el-form-item v-if="formAllArray.includes(btnForm.sysBtnType) && btnForm.sysBtnType != 'expandAll'" label="传入参数：">
						<el-input v-model="btnForm.openPagePara" type="text" size="small" placeholder="如:pageId={id}&name={name}"></el-input>
					</el-form-item>
					
					<!-- <el-form-item v-if="btnForm.sysBtnType == 'formBtn'" label="重置代码url：">
						<el-input v-model="btnForm.resetJsonUrl" type="text" size="small" placeholder="如:pageId={id}&name={name}"
						></el-input>
					</el-form-item> -->
					
					<!-- <el-form-item v-if="formArray.includes(btnForm.sysBtnType)" label="查询API：">
						<el-row>
							<el-col :span="6">
								<el-select v-model="btnForm.btnQueryMethod" placeholder="选择请求方式" size="small" style="width: 100%">
									<el-option v-for="(item, index) in configs.sysUrlMethods" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
								</el-select>
							</el-col> -->
							<!-- v-if="pageTypeArry.includes(pageType)" -->
							<!-- <el-col :span="6">
								<el-form-item label="">
									<el-select v-model="btnForm.btnQueryGateway" placeholder="选择网关" size="small" style="width: 100%">
										<el-option v-for="(item, index) in apiGatewayDict" :key="index" :label="item.label" :value="item.value"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-input v-model="btnForm.btnQueryUrl" type="text" maxlength="120" size="small" placeholder="请输入查询API"
								></el-input>
							</el-col>
						</el-row>
					</el-form-item> -->
					
					<el-form-item v-if="formArray.includes(btnForm.sysBtnType)" label="请求API：">
						<el-row>
							<el-col :span="6">
								<el-select v-model="btnForm.btnSubmitMethod" clearable placeholder="选择请求方式" size="small" style="width: 100%">
									<el-option v-for="(item, index) in configs.sysUrlMethods" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
								</el-select>
							</el-col>
							<!-- v-if="pageTypeArry.includes(pageType)" -->
							<el-col :span="6">
								<el-form-item label="">
									<el-select v-model="btnForm.btnSubmitGateway" clearable placeholder="选择网关" size="small" style="width: 100%">
										<el-option v-for="(item, index) in apiGatewayDict" :key="index" :label="item.dictLabel" :value="item.dictValue"></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-input v-model="btnForm.btnSubmitUrl" type="text" maxlength="120" size="small" placeholder="请输入提交API"
								></el-input>
							</el-col>
						</el-row>
					</el-form-item>
					<el-row v-if="btnForm.sysBtnType === 'pageBtn'">
						<el-col :span="12">
							<el-form-item label="页面类型：" prop="sysPageType">
								<el-select v-model="btnForm.sysPageType" clearable placeholder="请选择页面类型" size="small">
									<el-option
										v-for="item in configs.sysPageTypes"
										:key="item.dictValue"
										:label="item.dictLabel"
										:value="item.dictValue">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="页面ID：" prop="openPageId">
								<el-input v-model="btnForm.openPageId" type="text" size="small" placeholder="请输入页面Id"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row v-if="isBtnType">
						<el-col :span="16">
							<el-form-item label="判断条件：" prop="showPara">
								<el-input v-model="btnForm.showPara" type="text" size="small" placeholder="输入规范:key=='value'、key=='value'||key2=='value2'、key=='value'&&key2=='value2'"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="" prop="sysBtnShow">
								<el-select v-model="btnForm.sysBtnShow" clearable placeholder="请选择" size="small">
									<el-option
										v-for="item in sysBtnShowsList"
										:key="item.dictValue"
										:label="item.dictLabel"
										:value="item.dictValue">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="按钮样式" name="btnStyle">
					<el-row>
						<el-col :span="12">
							<el-form-item label="按钮样式：" prop="btnStyle">
								<el-select v-model="btnForm.btnStyle" clearable placeholder="请选择按钮样式" size="small">
									<el-option
										v-for="item in btnType"
										:key="item.value"
										:label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="朴素按钮:" prop="btnPlain">
								<el-select v-model="btnForm.btnPlain" clearable placeholder="请选择" size="small">
									<el-option
										v-for="item in btnPlain"
										:key="item.value"
										:label="item.name"
										:value="item.value">
									</el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row v-if="btnForm.btnStyle === 'custom'">
						<el-form-item label="按钮类名：" prop="btnClass">
							<el-input v-model="btnForm.btnClass" type="text" size="small" placeholder="请输入按钮自定义类名"></el-input>
						</el-form-item>
					</el-row>
					<el-row>
						<el-form-item label="按钮图标：" prop="btnIconFont">
							<el-input v-model="btnForm.btnIconFont" type="text" size="small" placeholder="请输入图标Class"></el-input>
						</el-form-item>
					</el-row>
				</el-tab-pane>
				<el-tab-pane label="JS代码" name="btnJscode">
					<el-row>
						<el-form-item label="JS执行方式:" prop="jsMethod">
							<el-radio-group v-model="btnForm.jsMethod" v-for="(item, index) in btnJsMethod" :key="index">
								<el-radio :label="item.value">{{ item.name }}</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-row>
					<el-row>
						<el-form-item label="JS代码：" prop="jsCode">
							<codemirror ref="myCm" v-model="btnForm.jsCode" :value="btnForm.jsCode" @blur="codeChange($event)" :options="cmOptions"></codemirror>
							<el-link href="https://www.yuque.com/docs/share/c9311699-0bd2-44a7-947c-7158cc33a09b?# 《五、表格设计器 - 按钮自定义JS》" target="_blank">自定义代码教程文档</el-link>
						</el-form-item>
					</el-row>
				</el-tab-pane>
			</el-tabs>
		</el-form>
	</div>
	<div slot="footer" class="dialog-footer">
		<el-button size="small" @click="cancel(false)">取消</el-button>
		<el-button type="primary" size="small" @click="submitForm">确定</el-button>
	</div>
  </el-dialog>
</template>

<script>
import {codemirror } from 'vue-codemirror' // 引入组件
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/base16-dark.css' //主题
import 'codemirror/mode/javascript/javascript.js'

// 折叠
import 'codemirror/addon/fold/foldgutter.css';
import 'codemirror/addon/fold/foldcode';
import 'codemirror/addon/fold/foldgutter';
import 'codemirror/addon/fold/brace-fold';
import 'codemirror/addon/fold/comment-fold';
	
export default {
  name: 'btnForm',
  components: {
	codemirror
  },
  props: {
    dialog: {
		type: Boolean,
		default: false
	},
	title: {
		type: String,
		default: ''
	},
	designPageJson: {
		type: Object,
		default: () => {}
	},
	info: {
		type: Object,
		default: () => {}
	},
	pageType: {
		type: String,
		default: ''
	},
	apiGatewayDict: {
		type: Array,
		default: () => []
	},
	buttonType: {
		type: String,
		default: ''
	}
  },
  data() {
	return {
		formAllArray: ['dataBtn', 'pageBtn', 'expandAll'],
		formArray: ['dataBtn'],
		pageTypeArry: ['table', 'parentTable'],
		btnFormData: '',
		hasPageForm: null,
		btnForm: {
			id: '',
			projectId: '',
			pageId: '',
			btnLabel: "",
			btnCode: "",
			sysBtnPosition: '',
			sysBtnType: '',
			sysPageShow: '',
			sysPageType: '',
			openPagePara: '',
			openPageId: '',
			showFlag: 'Y',
			btnQueryUrl: '',
			btnQueryMethod: '',
			btnSubmitUrl: '',
			btnSubmitMethod: '',
			btnQueryGateway: '',
			btnSubmitGateway: '',
			resetJsonUrl: '',
			btnStyle: '',
			btnPlain: false,
			btnIconFont: '',
			jsMethod: '',
			jsCode: '',
			btnClass: '',
			showPara: '',
			sysBtnShow: ''
		},
		btnRules: {
			sysBtnType: [{required: true, message: "请选择按钮类型", trigger: "blur"}],
			btnLabel:  [{ required: true, message: "请输入按钮名称", trigger: "blur" }],
			sysPageShow:  [{ required: true, message: "请选择展示方式", trigger: "blur" }]
		},
		configs: this.designPageJson.btnConfig,
		btnType: [{name:'默认按钮',value:''},{name:'主要按钮',value:'primary'},{name:'成功按钮',value:'success'},{name:'信息按钮',value:'info'},{name:'警告按钮',value:'warning'},{name:'危险按钮',value:'danger'},{name:'自定义样式',value:'custom'}],
		btnPlain: [{name:'是',value:true},{name:'否',value:false}],
		btnJsMethod: [{name:'页面加载自动执行',value:'auto'},{name:'点击事件执行',value:'event'}],
		sysBtnShowsList: this.designPageJson.btnConfig.sysBtnShows,
		// [{name:'显示',value:'show'},{name:'隐藏',value:'hide'},{name:'禁用',value:'disabled'}],
		methodRow: 6,
		urlRow: 12,
		isBtnType: this.buttonType === 'rowBtnList' ? true : false,
		cmOptions: {
			tabSize: 2,
			autoRefresh: true,
			mode: "text/javascript",
			theme: "base16-dark",
			lineNumbers: true,
			htmlMode: true,
			line: true,
			autoCloseBrackets: true,
			extraKeys: { Ctrl: "autocomplete" },
			readOnly: false,
			foldGutter: true,
			lineWrapping: true,
			gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
			// more codemirror options, 更多 codemirror 的高级配置...
		},
		isPageShow: false,
		btnTabsName: 'btnData',
	}
  },
  created() {
		if (this.info) {
			// const { btnLabel, btnQueryMethod, btnCode, btnQueryUrl, btnSubmitMethod, btnSubmitUrl, btnQueryGateway, btnSubmitGateway, id, openPageId, openPagePara, orderNum, pageId, projectId, resetJsonUrl, showFlag, sysBtnItem, sysBtnPosition, sysBtnType, sysPageShow, sysPageType, btnStyle, btnPlain, btnIconFont, showPara, sysBtnShows } = this.info
			this.btnForm = Object.assign(this.btnForm, this.info);
		}
		this.returnRow()
		const pageShowArray = ['pageBtn', 'dataBtn']
		if (pageShowArray.includes(this.btnForm.sysBtnType)) {
			this.isPageShow = true
		} else {
			this.isPageShow = false
		}
		// this.getApiGatewayDict()
  },
  methods: {
	// 表单类型判断
	pageFormChange(type) {
		// console.log(type)
		if (this.formAllArray.includes(type)) {
			this.hasPageForm = type
			if (this.hasPageForm === 'expandAll') {
				this.btnForm.btnLabel = '展开/折叠'
				this.btnForm.sysPageShow = 'no'
			}
		}
		const pageShowArray = ['pageBtn', 'dataBtn']
		if (pageShowArray.includes(type)) {
			this.isPageShow = true
		} else {
			this.isPageShow = false
		}
		this.$forceUpdate();
	},
	returnRow() {
		// console.log(this.pageTypeArry.includes(this.pageType), this.pageType)
		if(this.pageTypeArry.includes(this.pageType)) {
			this.methodRow = 6
			this.urlRow = 12
		} else {
			this.methodRow = 6
			this.urlRow = 18
		}
	},
	// js代码赋值
	codeChange(e){
		const val = e.getValue()
		this.btnForm.jsCode = val
		// this.pageShowJson = JSON.parse(val)
	},
	submitForm() {
		this.cancel(true, this.btnForm)
	},
	// 标签切换
	handleClick() {
		if (this.btnTabsName === 'btnJscode') {
			this.$nextTick(()=> {
				this.$refs.myCm.codemirror.focus();
				this.$refs.myCm.codemirror.refresh()
			})
		}
	},
	cancel(flag, data) { 
		this.$emit('btnClose', flag, data)
	},
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	@import '../fonts/TableMaking.css';
	.dialog-share .el-radio:last-child{
		margin-right: 20px !important;
	}
</style>
<style>
	.CodeMirror-wrap pre.CodeMirror-line, .CodeMirror-wrap pre.CodeMirror-line-like {
		line-height: 24px
	}
</style>
